<template>
  <div class='zhoubianDangdi'>
    <div class="top">
      <div v-for="(item,index) in top" :key='index' :class="{active:topData-index==1,inactive:topData-index!=1}" @click="checkfun(index)">
        <div class='box'>
          <div class="dingwei">
            <div>{{item}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="zhoubian" v-show="zhoubian">
        <div>周边短途游</div>
      </div>
      <div class="dangdi" v-show="dangdi">
        <div>当地玩乐</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ZhoubianDangdi',
  data () {
    return {
      top: ['周边短途', '当地玩乐'],
      topData: 1
    }
  },
  computed: {
    zhoubian () {
      if (this.topData === 1) {
        return true
      } else {
        return false
      }
    },
    dangdi () {
      if (this.topData === 2) {
        return true
      } else {
        return false
      }
    }
  },
  methods: {
    checkfun (ele) {
      this.topData = ele + 1
    }
  }

}
</script>
<style scoped lang='less'>
.top{
  background-color: #eee;
  padding-top: 10px;
  display:flex;
  width: 100%;
  &>div{
    width: 50%;
    height: 46px;
    font-weight:bold;
    .box{
      height: 100%;
      .dingwei{
        padding:8px 0;
        height:30px;
        &::after{
          content:'';
          display: block;
          width: 30%;
          height: 4px;
          border-radius:5px;
          margin:auto;
          background-color: transparent;
        }
        &>div{
          font-size:18px;
        }
      }
    }
  }
  .active{
    background-color: #eee;
    .box{
      // border-radius:10px 10px 0 0;
      background-color: #fff;
      .dingwei{
        &::after{
          background-color: #ffdd40;
        }
      }
    }
  }
  .inactive{
    background-color: #fff;
    .box{
      // border-radius:0 0 10px 10px;
      background-color: #eee;
    }
  }
}
.bottom{
  height: 200px;
  border:1px solid red;
}
</style>
